<template>
    <view>
        <view class="petNamePopup" @click="closedMask" :style="showAlias ? 'display: flex;' : 'display: none;'" >
			<view class="popups" v-if="aliasType=='view'">
				<view class="popups_head">
					<view @click.stop="closedMask" class="popups_line"></view>
				</view>
				<view class="propups_titles">项目别名</view>
                    <view class="propups_content">
                        <view class="conten_row" v-for="(item,i) in aliasArr" :key="i">{{item}}</view>
                    </view>
			</view>
			<!-- 编辑模式 -->
			<view v-else class="customer">
				<slot name="alias"></slot>
			</view>

		</view>
    </view>
</template>

<script>

// import unipopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components:{
		// unipopup
	},  
	data() {
		return {

		};
	},
	props:{
		aliasArr:{
			type:Array,
			default:()=>[]
		},
		showAlias:{
			type:Boolean,
			default:false
		},
		// 查看别名的类型 默认是查看
		aliasType:{
			type:String,
			default:'view'
		}
	},
	methods:{
		closedMask() {
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('closedMask',this.showAlias);
		},
	}
};
</script>

<style lang="scss" scoped>

.petNamePopup{
    width: 100%;
	height: 100%;
	background-color: $uni-bg-color-mask;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-end;
	// animation: fadeInOut 0.3s ease;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

}
.popups{
	height: 700rpx;
    width:100%;
	background-color: #fff;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	z-index: 99;
	.popups_head{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		.popups_line {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
		}
	}
	.propups_titles{
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		padding: 10rpx 30rpx 20rpx 30rpx;
		border-bottom: 2rpx solid #eeeeee;
	}
	.propups_content{
		width: 680rpx;
		margin: 0 auto;
        height:600rpx;
        overflow-x: hidden;
        overflow-y: scroll;
        // margin-bottom: 20rpx;
		.conten_row{
			padding: 20rpx 0;
			border-bottom: 2rpx #eee solid;
		}
        .conten_row:last-child{
            margin-bottom: 30rpx;
            border-bottom: none;
        }
	}
}

</style>